<template>
  <div>



    <el-col :span="5">  <el-input v-model="gaocha.caseNo" placeholder="案号搜索"></el-input></el-col>



    <el-col :span="5">
 <el-cascader :options="options"   v-model="gaocha.logTypeLogname" :show-all-levels="false" :props='{label:"logTypeLogname",value:"logTypeLogname",emitPath:false}'></el-cascader>
 </el-col>

    <el-col :span="3">
      <el-select v-model="gaocha.joblogStatus" placeholder="选择公开状态">
        <el-option label="选择公开状态" value=""></el-option>
        <el-option label="公开" value="Y"></el-option>
        <el-option label="未公开" value="N"></el-option>
      </el-select>
    </el-col>

    <el-col :span="4">
      <el-date-picker type="date" v-model="gaocha.sta" placeholder="选择开始时间"
                      value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>


    </el-col>
    <el-col class="line" :span="1">-</el-col>
    <el-col :span="4">
      <el-date-picker type="date" v-model="gaocha.ends" placeholder="选择结束时间"
                      value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
    </el-col>



    <el-col :span="5">
      <el-button type="primary" plain @click="gaojijiansuo">检索</el-button>
      <el-button  size="small"
                  type="primary"
                  @click="outExcel">导出Execl文件   <i class="el-icon-upload"/></el-button>
    </el-col>






    <el-table
        id="out-table"
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="logTypeLogname"
          label="日志类型"
          width="180">
      </el-table-column>
      <el-table-column
          prop="caseNo"
          label="案号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="client"
          label="客户名称">
      </el-table-column>
      <el-table-column
          prop="joblogStarttime"
          label="开始时间">
      </el-table-column>
      <el-table-column
          prop="joblogReportedtime"
          label="自报时间">
      </el-table-column>
      <el-table-column
          prop="joblogText"
          label="工作描述">
      </el-table-column>
      <el-table-column
          prop="joblogStatus"
          label="公开状态">
        <template scope="scope">
          <p v-if="scope.row.joblogStatus=='Y'">公开</p>
          <p v-if="scope.row.joblogStatus=='N'">未公开</p>
        </template>
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--            按钮-->

          <el-dropdown  @command="handleCommand">
            <el-button  round>
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  :command="beforeHandleCommand(scope.row,'a')" >查看</el-dropdown-item>
              <el-dropdown-item   :command="beforeHandleCommand(scope.row,'b')" >修改</el-dropdown-item>
              <el-dropdown-item  :command="beforeHandleCommand(scope.row,'c')" >删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>

      </el-table-column>
      <!--结束-->


      <!--结束-->
    </el-table>
    <!--分页-->
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="gaocha.currentPage"
        :page-sizes="[5, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--分页结束-->
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {

  name: "LogJob",
  data() {
    return {
      tableData: [],
      total :0, //总共有多少条数据
      gaocha:{
        currentPage:1, //当前页码
        pageSize:5,    //    每页显示数据的条数
        userid :JSON.parse(localStorage["user"])[0].id,
        caseNo: "",  //案号
        logTypeLogname: "", //日志类型
        joblogStatus: "", //状态
        sta : "", //开始时间
        ends : "" //结束时间

      },options:[]  ,      //递归数据
      value:[]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },

    digui(){
      this.$http.post('/logJob/digui')
          .then(res =>{this.options=res.data.data
            console.log(this.options)
          })
    },
    //分页
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.gaocha.pageSize = size;
      console.log(this.gaocha.pageSize)  //每页下拉显示数据
      this.GetLogJob()
    },
    handleCurrentChange: function(currentPage){
      this.gaocha.currentPage = currentPage;
      console.log(this.gaocha.currentPage)  //点击第几页
      this.GetLogJob()
    },

    //分页结束
    //文件导出
    outExcel(){
      let fix = document.querySelector('.el-table__fixed')
      let wb
      if (fix) {
        wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix))
        document.querySelector('#out-table').appendChild(fix)
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      }
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
            new Blob([wbout], {
              type: 'application/octet-stream'
            }),
            '日志信息.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
    ,
    //高级查询
    gaojijiansuo(){
      this.GetLogJob();
    },

    //操作下拉选项触发之前发生的事情
    beforeHandleCommand(row,command){
      return {
        'row': row,
        'command':command
      }
    },

    //操作  查看  修改 删除
    handleCommand(command) {
      //console.log(command)
      switch (command.command) {
        case "a"://查看

          this.$router.push({name:'logjobchakan',query:{jobid:command.row.jobid}})
          break;
        case "b"://修改
          this.$router.push({name:'logjobxiugai',query:{jobid:command.row.jobid}})
          break;
        case "c"://删除
          this.shanchu(command.row.jobid);
          break;

      }
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    GetLogJob(){
      this.$http.post('/logJob/chaxun',this.gaocha)
          .then(res =>{this.tableData=res.data.data.list
            //总条数
            this.total=  res.data.data.total
            //console.log(res.data);
          })

    },
    //删除
    shanchu(revo){
      this.$http.delete("/logJob/shanchu",{data: {"jobid":revo}} )  .then(res=>{
        if(20000==res.data.status){
          this.$message("删除成功");
          this.GetLogJob();
        }else{
          alert("删除失败")
        }

      })
    }
  },
//出生触发查询
  created() {
    this.GetLogJob();
    this.digui();
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}



</style>